/*
 * @Author: 脉迈
 * @Date: 2021-10-22 10:57:49
 * @LastEditors: 脉迈
 * @LastEditTime: 2021-10-22 15:21:47
 */
import React, { FC, useState } from "react";
import { Tooltip, Popover } from "antd";
import styles from "./FontType.module.scss";
import {
  BoldOutlined,
  ItalicOutlined,
  UnderlineOutlined,
  AlignCenterOutlined,
  AlignLeftOutlined,
  AlignRightOutlined,
  HighlightOutlined,
} from "@ant-design/icons";
import {
  pageComponentsState,
  blockActiveIndexState,
  componentActiveIndexState,
} from "store/modules/element";
import { SketchPicker } from "react-color";
import { useRecoilState } from "recoil";
const FontType: FC = () => {
  const [fontColor, setFontColor] = useState();
  const [pageComponentList, setPageComponentList] =
    useRecoilState(pageComponentsState);
  const [blockActiveIndex] = useRecoilState(blockActiveIndexState);
  const [componentActiveIndex] = useRecoilState(componentActiveIndexState);

  const handleChange = (prop: string) => {
    console.log(pageComponentList);
    let newPageComponentList = JSON.parse(JSON.stringify(pageComponentList));
    let fontObject =
      newPageComponentList[blockActiveIndex].children[componentActiveIndex]
        .properties.font.value;
    switch (prop) {
      case "fontWeight":
        fontObject.fontWeight =
          fontObject.fontWeight === "bold" ? "normal" : "bold";
        setPageComponentList(newPageComponentList);

        break;

      case "fontStyle":
        fontObject.fontStyle =
          fontObject.fontStyle === "italic" ? "normal" : "italic";
        setPageComponentList(newPageComponentList);
        break;
      case "textDecoration":
        fontObject.textDecoration =
          fontObject.textDecoration === "unset" ? "underline" : "unset";
        setPageComponentList(newPageComponentList);
        break;
      case "left":
        fontObject.textAlign = "left";
        setPageComponentList(newPageComponentList);
        break;
      case "center":
        fontObject.textAlign = "center";
        setPageComponentList(newPageComponentList);
        break;
      case "right":
        fontObject.textAlign = "right";
        setPageComponentList(newPageComponentList);
        break;

      default:
        break;
    }
  };

  const handleChangeComplete = (color: any) => {
    setFontColor(color);
    let { rgb } = color;
    let { r, g, b, a } = rgb;
    let newPageComponentList = JSON.parse(JSON.stringify(pageComponentList));
    let fontObject =
      newPageComponentList[blockActiveIndex].children[componentActiveIndex]
        .properties.font.value;

    fontObject.color = `rgba(${r},${g},${b},${a})`;
    setPageComponentList(newPageComponentList);
  };

  return (
    <div className={styles.font}>
      <div
        className={styles.item}
        onClick={() => {
          handleChange("fontWeight");
        }}
      >
        <Tooltip placement="bottom" title="加粗">
          <BoldOutlined className={styles.icon} />
        </Tooltip>
      </div>
      <div
        className={styles.item}
        onClick={() => {
          handleChange("fontStyle");
        }}
      >
        <Tooltip placement="bottom" title="斜体">
          <ItalicOutlined className={styles.icon} />
        </Tooltip>
      </div>
      <div
        className={styles.item}
        onClick={() => {
          handleChange("textDecoration");
        }}
      >
        <Tooltip placement="bottom" title="下划线">
          <UnderlineOutlined className={styles.icon} />
        </Tooltip>
      </div>
      <div
        className={styles.item}
        onClick={() => {
          handleChange("left");
        }}
      >
        <Tooltip placement="bottom" title="左对齐">
          <AlignLeftOutlined className={styles.icon} />
        </Tooltip>
      </div>
      <div
        className={styles.item}
        onClick={() => {
          handleChange("center");
        }}
      >
        <Tooltip placement="bottom" title="居中">
          <AlignCenterOutlined className={styles.icon} />
        </Tooltip>
      </div>
      <div
        className={styles.item}
        onClick={() => {
          handleChange("right");
        }}
      >
        <Tooltip placement="bottom" title="右对齐">
          <AlignRightOutlined className={styles.icon} />
        </Tooltip>
      </div>
      <div className={styles.item}>
        <Popover
          content={
            <SketchPicker
              color={fontColor}
              onChangeComplete={handleChangeComplete}
            />
          }
          title="颜色"
          trigger="click"
          placement="bottom"
        >
          <HighlightOutlined className={styles.icon} />
        </Popover>
      </div>
    </div>
  );
};
export default FontType;
